<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <h1>{{this.detail.woProTitle}}</h1>
          <h2>发起人: {{this.detail.submitName}} 提交时间: {{this.detail.submitTime}}</h2>
          <p>工单编号: {{this.detail.woNumber}}</p>
          <p>工单类别: {{this.detail.categoryName}}</p>
          <p>问题描述: {{this.detail.woProCont}}</p>
          <p>工单状态: {{this.detail.status}}</p>

          <!-- 遍历得到工单的图片 -->
          <p>问题截图:</p>
          <el-col :span="6"
                  v-for="(item, index) in detail.tsWorkOrderImgs"
                  :key="index"
                  style="margi:10px">
            <el-image :src="item.imgUrl"
                      style="width:200px; height:200px"></el-image>

          </el-col>

          <!-- 沟通记录的图片 -->
        </div>

      </el-col>

    </el-row>
    <el-row>
      <el-col :span="18">
        <el-button type="primary"
                   v-if="orderDetail.woStatus!='4'&&orderDetail.woStatus!='5'"
                   @click="closeOrder()">关闭工单</el-button>
      </el-col>
    </el-row>

    <el-row v-if="orderDetail.woStatus=='2'||orderDetail.woStatus=='3'"
            :gutter="20">
      <el-col :span="18">
        <div style="margin-top: 50px;margin-left:50px;width: 600px;">
          <el-form ref="feedBack"
                   :model="feedBack"
                   label-width="80px"
                   vertical-align:
                   middle>
            <el-form-item label="反馈">
              <el-input type="textarea"
                        v-model="feedBack.clCommCont"
                        :rows="5"></el-input>
            </el-form-item>
            <!-- 图片上传  -->
            <el-form-item label="问题截图"
                          prop="idPhoto">
              <el-upload ref="pictureUpload"
                         action="/api/fileUpload/workOrderImgUpload"
                         list-type="picture-card"
                         multiple
                         :auto-upload="true"
                         :on-preview="handlePictureCardPreview"
                         :on-remove="handleRemove"
                         :on-success="getUrlList"
                         :limit="5">
                <i slot="default"
                   class="el-icon-plus"></i>
                <div slot="file"
                     slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail"
                       :src="file.url"
                       alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete"
                          @click="handleDownload(file)">
                      <i class="el-icon-download"></i>
                    </span>
                    <span class="el-upload-list__item-delete"
                          @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <!-- 1、预览 -->
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="预览图片" />
              </el-dialog>
            </el-form-item>

            <el-form-item>
              <el-button type="primary"
                         v-if="orderDetail.woStatus!='2'||orderDetail.woStatus!='3'"
                         @click="onSubmit">反馈</el-button>

            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18"
              v-for="(item2, index) in detail.tsCommLogsDtoList"
              :key="index"
              style="margi:10px">
        <span>{{item2.clCommName}} {{item2.clCommTime}}</span>
        <p>{{item2.clCommCont}}</p>
        <el-col :span="6"
                v-for="(item3, index) in item2.commLogImgs"
                :key="index"
                style="margi:10px">
          <el-image :src="item3.clImgUrl"
                    style="width:200px; height:200px"></el-image>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderDetail: {},
      woId: 0,
      detail: {
        status: '',
        submitName: '',
        submitTime: '',
        categoryName: '',
        tsCommLogsDtoList: [
          {
            clCommCont: '',
            clCommId: 0,
            clCommName: '',
            clCommTime: '',
            commLogImgs: [
              {
                clCommId: 0,
                clImgId: 0,
                clImgUrl: '',
                createById: 0,
                createTime: '',
                isDeleted: '',
                updateById: 0,
                updateTime: '',
              },
            ],
            isDeleted: '',
          },
        ],
        tsWorkOrderImgs: [
          {
            createById: 0,
            createTime: '',
            imgId: 0,
            imgUrl: '',
            isDeleted: '',
            updateById: 0,
            updateTime: '',
            woId: 0,
          },
        ],
        woId: 0,
        woNumber: '',
        woProCont: '',
        woProTitle: '',
      },
      feedBack: {
        clCommCont: '',
        clCommId: 0,
        clCommPerId: 4,
        clCommTime: '',
        commLogImgs: [],
        woId: 0,
      },
      //关闭订单
      closeOrderVo: {
        woId: 0,
        updateById: 0,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    }
  },
  methods: {
    //提交按钮
    onSubmit() {
      // 获取到图片上传区的地址集合
      console.log('我要上传的图片集合', this.$refs.pictureUpload.uploadFiles)

      let list = this.$refs.pictureUpload.uploadFiles

      list.forEach((item, i) => {
        //把本地的地址赋值到表单对象中的woImgList集合中
        this.feedBack.commLogImgs.push({
          clImgUrl: item.url,
          createById: this.feedBack.clCommPerId,
        })
      })
      this.feedBack.woId = this.woId
      console.log('传回去的参数为', this.feedBack)
      // 获取提交人的id
      // this.feedBack.clCommPerId=localStorage.getItem("userId");
      this.$axios
        .post('/api/feedback/add', this.feedBack)
        .then((res) => {
          if (res.data.code == 200) {
            // 页面跳转
            this.$router.push({
              name: '提交成功',
              params: {},
            })
          }
        })
        .catch()
    },
    //关闭工单
    closeOrder() {
      //发请求关闭工单
      this.$confirm('确定要关闭工单吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.closeOrderVo.woId = this.woId
        this.closeOrderVo.updateById = 4
        // this.closeOrder.updateById=localStorage.getItem("userId");
        this.$axios
          .post('/api/workOrder/user/close', this.closeOrderVo)
          .then((res) => {
              if(res.data.code==200){
                this.$message({
                    message: res.data.msg,
                    type: 'success',
                });
                    this.$router.push({
              name: '我的工单',
              params: {},
            })
              }else{
                    this.$message({
                    message: res.data.msg,
                    type: 'warning',
                });
              }
          })
          .catch()
      })
    },
    // 2、下载
    handleDownload(file) {
      window.open(file.url)
    },
    // 3、删除--根据 url 的不同进行匹配删除
    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] == file.url) {
          uploadFiles.splice(i, 1)
        }
      }
      //删除云端的图片
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    getUrlList(res, file, fileList) {
      file.url = res.data[0]
    },
  },
  created() {
    this.woId = this.$route.params.row.woId
    this.orderDetail = this.$route.params.row
    this.$axios
      .get('/api/workOrder/user/viewOne/' + this.woId)
      .then((res) => {
        console.log(res.data.data)
        this.detail = res.data.data
        console.log(this.detail)
      })
      .catch()
  },
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>